<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highstock Example</title>
		
		<script type="text/javascript">
		
		$.get('/samples/stock/demo/column/data.csv', function(csv) {
			
			// parse the CSV data
			var data = [], navigatorData = [], header, comment = /^#/, x;
			
			$.each(csv.split('\n'), function(i, line){
			    if (!comment.test(line)) {
			        if (!header) {
			            header = line;
			        }
			        else {
			            var point = line.split(';'), date = point[0].split('-');
			            
			            x = Date.UTC(date[2], date[1] - 1, date[0]);
			            
			            data.push([x, parseFloat(point[2])]); // volume
			        }
			    }
			});
			
			// create the chart	
			chart = new Highcharts.StockChart({
			    chart: {
			        renderTo: 'container',
			        alignTicks: false
			    },
			    
			    rangeSelector: {
			        selected: 0
			    },
			    
			    title: {
			        text: 'USD to EUR exchange volume'
			    },
			    
			    xAxis: {
			        type: 'datetime',
			        maxZoom: 14 * 24 * 3600000,
			        // fourteen days
			        title: {
			            text: null
			        }
			    },
			    
			    series: [{
			        type: 'column',
			        name: 'Volume',
			        data: data,
			        dataGrouping: {
			        	units: [[
							'week',                         // unit name
							[1]                             // allowed multiples
						], [
							'month',
							[1, 2, 3, 4, 6]
						]]
			        }
			    }]
			});
		});
		</script>
		
	</head>
	<body>
			
		<script type="text/javascript" src="http://www.highcharts.com/js/testing-stock.js"></script>
		
		<div id="container" style="height: 500px"></div>		
	</body>
</html>
